<template>
  <div>
    <div class="name">{{ name }}</div>
    <img class="avatar" :src="avatar" alt="" @click="handleClickAvatar" />
  </div>
</template>

<script lang="ts">
import { Emit, Prop, Vue, Component } from 'vue-property-decorator';

@Component
export default class Avatar extends Vue {
  @Prop() avatar?: string;
  @Prop() name?: string;

  @Emit('emitAvatarEvent')
  avartEvent() {
    console.log('todo in avartEvent');
    return {
      name: this.name,
    };
  }

  handleClickAvatar = () => {
    console.log('handleClickAvatar');
    this.avartEvent();
  };
}
</script>

<style lang="postcss" scoped>
.avatar {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: 30px auto;
}
</style>
